<template>
	<div class="check-group-info">
		<div class="modify-prop">
			<el-dialog title="编辑坐席属性" :close-on-click-modal="false" :visible.sync="showModifyProp" width="500px" :before-close="closeModifyProp">
				<div class="from" v-for="(attr, index) in schedulingAttributes" :key="attr._id">
					<el-input type="text" v-model="attr.key"></el-input>
					<el-input type="text" v-model="attr.value"></el-input>
					<i class="el-icon-close" @click="reomveProp(index)" v-show="index > 0"></i>
				</div>
				<el-button class="add-prop" type="primary" plain @click="addAttribute">添加属性</el-button>
				<div class="btn">
					<el-button @click="closeModifyProp">关闭</el-button>
					<el-button @click="createAgentProp" type="primary">确定</el-button>
				</div>
			</el-dialog>
		</div>
		<div class="add-agent">
			<el-dialog title="创建坐席" :close-on-click-modal="false" :visible.sync="showAddAgent" width="800px" :before-close="closeAddTips">
				<el-tabs type="border-card" v-model="activeType" @tab-click="changeAgnetType">
					<el-tab-pane label="人工坐席">
						<SubmitForm :fromInfo="addAgentData" @cancelAddAgent="cancelAddAgent" @createAgent="createAgent" />
					</el-tab-pane>
					<el-tab-pane label="机器人坐席">
						<SubmitForm :fromInfo="addRobotData" @cancelAddAgent="cancelAddAgent" @createAgent="createAgent" />
					</el-tab-pane>
				</el-tabs>
			</el-dialog>
		</div>
		<div class="add-user">
			<el-dialog title="创建用户" :close-on-click-modal="false" :visible.sync="showAddUser" width="800px" :before-close="closeAddUser">
				<el-form :model="addUserData.submitProp" label-width="100px" ref="formRef">
					<el-form-item label="用户名" :rules="addUserData.userNameRules" prop="userName">
						<el-input v-model="addUserData.submitProp.userName" placeholder="请输入用户名" maxlength="8"></el-input>
					</el-form-item>
					<el-form-item label="真实姓名" :rules="addUserData.realNameRules" prop="realName">
						<el-input v-model="addUserData.submitProp.realName" placeholder="请输入真实姓名" maxlength="12"></el-input>
					</el-form-item>
					<el-form-item label="请选择性别" :rules="addUserData.requireRules" prop="gender">
						<el-select v-model="addUserData.submitProp.gender" placeholder="请选择性别">
							<el-option v-for="item in addUserData.genderOptions" :key="item.gender" :label="item.label" :value="item.gender"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="密码" :rules="addUserData.userPassRules" prop="pass">
						<el-input type="password" v-model="addUserData.submitProp.pass" placeholder="请输入密码" maxlength="16"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" :rules="addUserData.userCheckPassRules" prop="checkPass">
						<el-input type="password" v-model="addUserData.submitProp.checkPass" placeholder="请再次输入密码" maxlength="16"></el-input>
					</el-form-item>
					<el-form-item label="用户等级" :rules="addUserData.userLevelRules" prop="userLevel">
						<el-input v-model.number="addUserData.submitProp.userLevel" placeholder="请输入用户等级"></el-input>
					</el-form-item>
					<el-form-item class="upload" label="上传头像">
						<el-upload
							class="avatar-uploader"
							:action="`${uploadUrl}/ivcs/api/v1/upload`"
							:headers="headers"
							:show-file-list="false"
							:on-success="uploadSuccess"
							:before-upload="beforeUpload"
						>
							<img v-if="addUserData.submitProp.picture" :src="addUserData.submitProp.picture" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<p class="error" v-show="isError">仅限上传大小为2m内的png与jpg格式图片</p>
					</el-form-item>
					<div class="btns">
						<el-button @click="cancelCreateUser">取消</el-button>
						<el-button type="primary" @click="createUser">确认</el-button>
					</div>
				</el-form>
			</el-dialog>
		</div>
		<div class="modify-user">
			<el-dialog title="修改用户" :close-on-click-modal="false" :visible.sync="showModifyUser" width="800px" :before-close="closeModifyUser">
				<el-form :model="modifyData.submitProp" label-width="100px" ref="formRef">
					<el-form-item label="用户名" :rules="modifyData.userNameRules" prop="userName">
						<el-input v-model="modifyData.submitProp.userName" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item label="真实姓名" :rules="modifyData.realNameRules" prop="realName">
						<el-input v-model="modifyData.submitProp.realName" placeholder="请输入真实姓名"></el-input>
					</el-form-item>
					<el-form-item label="请选择性别" :rules="modifyData.requireRules" prop="gender">
						<el-select v-model="modifyData.submitProp.gender" placeholder="请选择">
							<el-option v-for="item in modifyData.genderOptions" :key="item.gender" :label="item.label" :value="item.gender"> </el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="密码" :rules="modifyUserData.userPassRules" prop="pass">
						<el-input type="password" v-model="modifyUserData.submitProp.pass" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" :rules="modifyUserData.userCheckPassRules" prop="checkPass">
						<el-input type="password" v-model="modifyUserData.submitProp.checkPass" placeholder="请再次输入密码"></el-input>
					</el-form-item> -->
					<el-form-item label="用户等级" :rules="modifyData.userLevelRules" prop="userLevel">
						<el-input v-model.number="modifyData.submitProp.userLevel" placeholder="请输入用户等级"></el-input>
					</el-form-item>
					<el-form-item class="upload" label="上传头像">
						<el-upload
							class="avatar-uploader"
							:action="`${uploadUrl}/ivcs/api/v1/upload`"
							:headers="headers"
							:show-file-list="false"
							:on-success="modifyPicSuccess"
							:before-upload="beforeUpload"
						>
							<img v-if="modifyData.submitProp.picture" :src="modifyData.submitProp.picture" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<p class="error" v-show="isError">仅限上传大小为2m内的png与jpg格式图片</p>
					</el-form-item>
					<div class="btns">
						<el-button @click="closeModifyUser">取消</el-button>
						<el-button type="primary" @click="getModifyUser">确认</el-button>
					</div>
				</el-form>
			</el-dialog>
		</div>
	</div>
</template>

<script>
// import Table from '../components/Table.vue';
import SubmitForm from '../components/SubmitForm.vue';
import { validatePass, validatePassChecked, validateUserName } from '@/utils/formValidate';
import { mapState } from 'vuex';
import { validateCustomerUserName, validateCustomerRealName, validateCustomerPass, validateCustomerPassChecked } from '@/utils/customerValidate';
export default {
	components: {
		// Table,
		SubmitForm
	},
	props: {
		showAddAgent: {
			type: Boolean,
			defualt: () => false
		},
		groupOptions: {
			type: Array,
			defualt: () => []
		},

		agentType: {
			type: String,
			defualt: () => '0'
		},
		showAddUser: {
			type: Boolean,
			default: () => false
		},
		showModifyProp: {
			type: Boolean,
			default: () => false
		},
		showModifyUser: {
			type: Boolean,
			default: () => false
		},
		schedulingAttributes: {
			type: Array,
			default: () => []
		},
		modifyUserData: {
			type: Object,
			defualt: () => {}
		}
	},
	data() {
		return {
			activeType: this.agentType,
			modifyData: this.modifyUserData,
			uploadUrl: loginUrl,
			headers: {
				'x-access-token': localStorage.getItem(`zco_admin_token_${window.uid}`)
			},
			requirePicRules: [{ required: true, message: '请选择性别', trigger: 'blur' }],
			radio: '',
			addAgentData: {
				submitProp: {
					userName: '',
					pass: '',
					checkpass: ''
				},
				formItem: [
					{
						id: 1,
						label: '用户名',
						prop: 'userName',
						type: '',
						placeholder: '请输入用户名',
						ele: 'input',
						value: '',
						readonly: false,
						rules: [
							{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
							{ validator: validateUserName, trigger: ['blur', 'change'] }
						]
					},
					{
						id: 2,
						label: '密码',
						prop: 'pass',
						type: 'password',
						placeholder: '请输入密码',
						ele: 'input',
						value: '',
						readonly: false,
						rules: [
							{ required: true, message: '请输入密码', trigger: ['blur', 'change'] },
							{ validator: validatePass, trigger: ['blur', 'change'] }
						]
					},
					{
						id: 3,
						label: '确认密码',
						prop: 'checkpass',
						type: 'password',
						placeholder: '请输入密码',
						ele: 'input',
						value: '',
						readonly: false,
						rules: [
							{ required: true, message: '请输入密码', trigger: ['blur', 'change'] },
							{ validator: validatePassChecked, trigger: ['blur', 'change'] }
						]
					}
				]
			},
			addRobotData: {
				submitProp: {
					userName: ''
				},
				formItem: [
					{
						id: 1,
						label: '用户名',
						prop: 'userName',
						type: '',
						placeholder: '请输入用户名',
						ele: 'input',
						value: '',
						readonly: false,
						rules: [
							{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
							{ validator: validateUserName, trigger: ['blur', 'change'] }
						]
					}
				]
			},
			addUserData: {
				submitProp: {
					userName: '',
					realName: '',
					pass: '',
					checkpass: '',
					userLevel: '',
					picture: ''
				},
				genderOptions: [
					{ gender: 'male', label: '男' },
					{ gender: 'female', label: '女' }
				],
				userNameRules: [
					{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
					{ validator: validateCustomerUserName, trigger: 'blur' }
				],
				requireRules: [{ required: true, message: '请选择性别', trigger: 'change' }],
				realNameRules: [
					{ required: true, message: '请输入真实姓名', trigger: ['blur', 'change'] },
					{ validator: validateCustomerRealName, trigger: ['blur', 'change'] }
				],
				userPassRules: [
					{ required: true, message: '请输入密码', trigger: ['blur', 'change'] },
					{ validator: validateCustomerPass, trigger: ['blur', 'change'] }
				],
				userCheckPassRules: [
					{ required: true, message: '请输入密码', trigger: ['blur', 'change'] },
					{ validator: validateCustomerPassChecked, trigger: ['blur', 'change'] }
				],
				userLevelRules: [
					{ required: true, message: '请输入用户等级', trigger: ['blur', 'change'] },
					{ type: 'number', min: 1, max: 100, message: '格式错误，用户等级为1~100以内的数字，不可为空', trigger: ['blur', 'change'] }
				],
				userPic: [{ required: true, message: '请上传用户头像', trigger: ['blur', 'change'] }]
			},
			isError: false //上传头像文案显示隐藏
		};
	},
	mounted() {},
	computed: {
		...mapState({
			login: state => state.login.urls
		})
	},
	methods: {
		closeAddTips() {
			this.$emit('closeAddTips');
		},
		cancelAddAgent() {
			this.$emit('cancelAddAgent');
		},
		createAgent(info) {
			this.$emit('createAgent', info);
		},
		closeAddUser() {
			this.addUserData.submitProp.picture = '';
			this.$emit('closeAddUser');
		},
		cancelAddUser() {
			this.addUserData.submitProp.picture = '';
			this.$emit('cancelAddUser');
		},
		closeModifyProp() {
			this.$emit('closeModifyProp');
		},
		createAgentProp() {
			let flag = true;
			this.schedulingAttributes.find(item => {
				if (item.value.trim() === '' || item.key.trim() === '') {
					this.$message.error('请填写完整信息！');
					flag = false;
					return true;
				}
			});
			if (flag) {
				this.$emit('createAgentProp');
			}
		},
		closeModifyUser() {
			this.$emit('closeModifyUser');
			this.isError = false;
		},
		getModifyUser() {
			this.$refs['formRef'].validate(valid => {
				if (valid) {
					this.$emit('getModifyUser');
					this.$refs['formRef'].resetFields();
					this.isError = false;
				}
			});
		},
		changeAgnetType() {
			this.$emit('changeAgnetType', this.activeType);
		},
		addAttribute() {
			this.$emit('addAttribute');
		},
		reomveProp(index) {
			this.$emit('reomveProp', index);
		},
		// 上传图片事件
		beforeUpload(file) {
			const isJpg = file.type === 'image/jpeg';
			const isPng = file.type === 'image/png';
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!(isJpg || isPng)) {
				this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
			} else if (!isLt2M) {
				// this.$message.error('上传头像图片大小不能超过 2MB!');
				this.isError = true;
			} else {
				this.isError = false;
			}
			return (isJpg || isPng) && isLt2M;
		},
		uploadSuccess(file) {
			console.log(file);
			if (file.code === 200) {
				this.addUserData.submitProp.picture = file.data.url;
			} else {
				this.$message.error('头像上传失败');
				this.addUserData.submitProp.picture = '';
			}
		},
		modifyPicSuccess(file) {
			this.$emit('modifyPicSuccess', file);
		},
		createUser() {
			this.$refs['formRef'].validate(valid => {
				if (valid) {
					this.$emit('createUser', this.addUserData.submitProp);
					this.$refs['formRef'].resetFields();
					this.addUserData.submitProp.picture = '';
					this.isError = false;
				}
			});
		},
		cancelCreateUser() {
			this.$refs['formRef'].resetFields();
			this.addUserData.submitProp.picture = '';
			this.$emit('cancelCreateUser');
			this.isError = false;
		}
	}
};
</script>

<style lang="less" scoped>
.check-group-info {
	.add-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		p {
			padding: 10px 0;
		}
		.el-checkbox-group {
			height: 40px;
			width: 180px;
			text-align: center;
			line-height: 40px;
		}
	}
	.group-table {
		padding: 20px 0;
	}
	.btn {
		padding: 10px 0;
		text-align: right;
	}
	.modify-group {
		p {
			padding: 10px 0;
		}
		.select,
		.role,
		.radio {
			padding: 10px 0;
		}
		.el-input-number {
			width: 217px;
		}
		.el-checkbox-group {
			padding: 20px 0 0 76px;
		}
	}
	.add-prop {
		margin: 20px 0px 20px 10px;
	}
	.from {
		padding: 10px 0;
		display: flex;
		align-items: center;
		i {
			cursor: pointer;
			padding-left: 10px;
		}
		.el-input {
			padding-left: 10px;
			width: 40%;
		}
	}
}
</style>
<style lang="less">
.check-group-info {
	.el-checkbox__inner {
		width: 24px;
		height: 24px;
	}
	.el-checkbox__inner::after {
		height: 10px;
		left: 10px;
		top: 4px;
	}
	.upload {
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409eff;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
		.error {
			color: #f56c6c;
		}
	}
}
</style>
